<template>
<!-- 2. 在模板中配置规则
  (1) el-form: model, rules, ref
  (2) el-form-item： prop
 -->
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="手机号" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password"></el-input>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button @click="hClear">清空</el-button>
    </el-form-item>
  </el-form>

</template>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          password: ''
        },
        // 1. 定义规则
        rules:{
          name: [
            // trigger: 什么时候触发验证 
            { required: true, message: '请输入手机号', trigger: 'blur' },
            // pattern : 正则
            { pattern: /^1[345678]\d{9}$/, message: '请输入合法的手机号', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' },
            {
              validator: function(rule, value, callback) {
                console.log('自定义校验规则',  value, callback)
                if(value === '123456') {
                  callback(new Error('123456最差的密码了！'))
                } else {
                  callback()
                }
                // rule：采用的规则
                // value: 被校验的值
                // callback是回调函数， 
                //      如果通过了规则检验，就直接调用callback()
                //      如果没有通过规则检验，就调用callback(错误对象，在错误对象中说明原因)
                //         例如：callback(new Error('错误说明'))
              },
              trigger: 'blur'
            }
          ]
        }
      }
    },
    methods: {
      hClear () {
        //相当于重置表单
        // 这个方法可以
        // 1. 清理校验痕迹
        // 2. 恢复表单默认数据
        this.$refs.form.resetFields()
      },
      doLogin(){
        console.log('验证通过')
      },
      onSubmit() {
        // 用户名不能为空
        // if(this.form.name === '') {
        //   alert('用户名不能为空')

        //   return
        // }
        // 先做表单兜底验证
        //         说明：

        // - [validate](https://element.eleme.io/#/zh-CN/component/form#form-methods) 
        //    方法是表单组件自带的，用来对表单内容进行检验。
        //    需要在模板中添加对表单组件的引用：ref 的作用主要用来获取表单组件手动触发验证
        //    valid：element-form会自动判断，如果通过，它就是true
        // 3. 手动兜底校验
        this.$refs.form.validate(valid => {
          console.log(valid)
          if(valid) {
            // console.log('验证通过')
            this.doLogin()
          } else {
            console.log('验证失败')
          }
        })
        // console.log('submit!');
      }
    }
  }
</script>